<template>
  <div>
    <Drawer width="33%" title="查看详情" placement="right" v-model:visible="visible" @close="onClose">
      <template #closeIcon>
        <arrow-left-outlined />
      </template>
      <TypographyTitle :level="5">采样详情</TypographyTitle>
      <Row>
        <Col span="12">
          <FormItem label="traceId">{{ formState.traceId }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="端点">{{ formState.endpointName }}</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="起始时间">{{ formState.start }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="持续时间">{{ formState.duration }} ms</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="错误">{{ formState.isError }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="API类型"> SpringMVC </FormItem>
        </Col>
      </Row>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { Drawer, Row, Col, FormItem, TypographyTitle } from 'ant-design-vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { reactive, ref } from 'vue';
const visible = ref(false);
const formState = reactive({
  endpointName: undefined,
  start: undefined,
  duration: 0,
  traceId: undefined,
  isError: false,
});
const openDetail = async (listItem) => {
  formState.endpointName = listItem.endpointNames[0];
  formState.start = listItem.startStr;
  formState.duration = listItem.duration;
  formState.isError = listItem.isError;
  formState.traceId = listItem.traceIds[0];
  visible.value = true;
};
const onClose = () => {
  formState.endpointName = undefined;
  formState.start = undefined;
  formState.duration = 0;
  formState.isError = false;
  formState.traceId = undefined;
  visible.value = false;
};

defineExpose({ openDetail });
</script>
